<template>
  <van-row class="online-filter-box" type="flex" align="center" :justify="supportSort ? 'start' : 'end'">
    <div v-show="supportSort" class="sort-box">
      <van-row type="flex" justify="start" align="middle">
        <p
          class="sort-item"
          v-for="sortItem in sortList"
          :key="sortItem.fieldName"
          @click="onSortChange(sortItem)"
        >
          <span
            class="sort-txt"
            :class="{ sortActive: sortInfoActive === sortItem.fieldName }"
          >
            {{sortItem.showName}}
          </span>
          <i
            :class="['mobile-font' , sortItem.asc ? 'icon-asc' : 'icon-desc']"
            style="color:#707070; font-size:14px;"
          />
        </p>
      </van-row>
    </div>
    <slot name="filter" />
    <div v-show="supportSort" class="divider" />
    <span style="font-size:14px; flex-shrink: 0" v-if="hasFilter" @click="showFilter = !showFilter">
      筛选
      <i
        class="mobile-font icon-filter"
        style="font-size: 14px; margin-left: 1px;"
      />
    </span>
    <span style="font-size:14px;" v-else>
      刷新
      <van-icon
        name="replay"
        style="font-size: 14px; margin-left: 1px;"
        @click="onRefresh()"
      />
    </span>
    <!-- 过滤弹窗 -->
    <van-popup
      v-if="hasFilter"
      class="filter-box"
      v-model="showFilter"
      round
      position="bottom"
      get-container="body"
      :style="{ height: '80%' }"
      closeable
    >
      <van-row style="padding: 16px 24px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box;">
        <van-col :span="24" style="margin-bottom: 12px;">
          <div style="width: 100%; text-align: center; font-size: 14px; color: #333333;">筛选</div>
        </van-col>
        <!-- 过滤组件 -->
        <van-col :span="24" style="flex-grow: 1; height: 100px;">
          <slot />
        </van-col>
        <van-col :span="24">
          <van-row type="flex" style="flex-wrap: nowrap;">
            <van-button class="reset-btn" style="width: 104px; height: 40px;" @click="onReset()">重置</van-button>
            <van-button class="submit-btn" color="#FF7700" style="height: 40px;" @click="onRefresh()">确定</van-button>
          </van-row>
        </van-col>
      </van-row>
    </van-popup>
  </van-row>
</template>

<script>
export default {
  name: 'filterBox',
  props: {
    hasFilter: {
      type: Boolean,
      default: true
    },
    sortList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      showFilter: false,
      sortInfoActive: undefined
    }
  },
  methods: {
    onRefresh () {
      this.$emit('refresh');
      this.showFilter = false;
    },
    onReset () {
      this.$emit('reset');
      this.showFilter = false;
    },
    onSortChange (sortInfo) {
      if (sortInfo.asc == null) {
        sortInfo.asc = true;
      } else if (sortInfo.asc === true) {
        sortInfo.asc = false;
      } else if (sortInfo.asc === false) {
        sortInfo.asc = true;
      }
      if (sortInfo.asc != null) {
        this.sortInfoActive = sortInfo.fieldName
      }
      this.$emit('sort-change', sortInfo);
    }
  },
  computed: {
    supportSort () {
      return Array.isArray(this.sortList) && this.sortList.length > 0;
    }
  }
};
</script>

<style scoped>
  .online-filter-box {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
  .title {
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
    height: 40px;
    line-height: 40px;
  }
  .sort-box {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100px;
    height: 40px;
    line-height: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    font-size: 14px;;
  }
  .divider {
    width: 1px;
    height: 18px;
    background: #E8E8E8;
    margin: auto 8px;
  }
  .filter-box >>> .van-popup__close-icon {
    color: #333333;
    font-size: 20px;
  }
  .reset-btn {
    flex-grow: 0;
    flex-shrink: 0;
    width: 105px;
  }
  .submit-btn {
    flex-grow: 1;
    flex-shrink: 1;
    width: 105px;
    margin-left: 8px;
  }
  .van-icon-filter-o:before {
    content: none;
  }
  .van-icon-filter-o:after {
    content: '\e6b5';
  }
  .van-icon-sort:before {
    content: none;
  }
  .van-icon-sort:after {
    content: '\e721';
  }

  .sort-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .sort-item + .sort-item {
    margin-left: 8px;
  }
</style>
